<template>
<div style="width: 100%;display: flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;">
  <!------------------------------------------------左侧栏目-------------------------------------------------------------------->
  <div style="margin: 40px; ">
    <el-form  :model="newsParams" ref="newsForm"  size="medium "  style="width: 380px;">
      <el-form-item label="标签：" prop="label">
        <el-input
          placeholder="标签名称" v-model="newsParams.labels"
          clearable
        />
      </el-form-item>

      <el-form-item label="频道：" prop="channel">
        <el-select v-model="newsChannel" size="medium" placeholder="全部" @change="getListByChannel()" style="width: 380px;">

          <el-option
            v-for="item in cList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="定时：" prop="publishTime" >
        <el-date-picker size="large " v-model="newsParams.publishTime" style="width: 380px;"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"

        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="封面：" prop="type" >
        <el-radio-group v-model="newsParams.type">
          <el-radio  :label="1" @change="" size="mini">单图</el-radio>
          <el-radio  :label="3" @change="" size="mini">三图</el-radio>
          <el-radio :label="0" @change="" size="mini">无图</el-radio>
          <el-radio :label="4" @change="" size="mini">自动</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--------------------------左侧单图---------------------------->
      <div style="margin-bottom: 20px;" v-if="newsParams.type=='1'">
        <el-image :src="one_pic" style="width: 160px; height: 160px; cursor: pointer" @click="setLeftPicHandle('1')"></el-image>
      </div>
      <!--------------------------左侧三图---------------------------->
      <div style="margin-bottom: 20px; float: left; width: 600px;" v-if="newsParams.type=='3'">
        <el-image :src="three_pic1" class="three_pic" @click="setLeftPicHandle('3_1')"></el-image>
        <el-image :src="three_pic2" class="three_pic" @click="setLeftPicHandle('3_2')"></el-image>
        <el-image :src="three_pic3" class="three_pic" @click="setLeftPicHandle('3_3')"></el-image>


      </div>

      <el-form-item>
        <el-button type="primary" icon="el-icon-message" size="medium " @click="submitNews()">保存草稿</el-button>
        <el-button type="warning" icon="el-icon-time" size="medium " @click="submitAndVerify()">提交审核</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!------------------------------------------------右侧图文编辑器--------------------------------------------------------------->
  <div style="margin-right: 150px;">
    <!--------------------------右侧顶部手机头部---------------------------->
    <div style="margin-top: 10px; ">
      <img src="@/pics/phone_top.jpg" width="450"/>
    </div>
    <!--------------------------右侧图文编辑区---------------------------->
    <div style="margin-top:-25px;width:450px;height:620px;
        border-left: 11px solid #000000;border-right: 12px solid #000000;overflow-y:auto;">
      <div style="margin-top: 10px;">
        <el-input v-model="newsParams.title" placeholder="请输入标题"></el-input>
      </div>
      <div v-for="(m,index) in contentJsonArray" :key="index" @click="handleEdit(index)"
           style="margin:20px;width:375px;flex-wrap:wrap; font-size: 14px; color: #606266;" class="news_content_class">
        <span v-if="m.type=='text'">{{m.value}}</span>
        <span v-if="m.type=='image'"><img :src="m.value" style="width: 100%;"/></span>
      </div>
      <!--------------------------右侧图文编辑区按钮---------------------------->
      <div style="margin-top: 20px;margin-left: 100px;">
        <el-button @click="handleAdd()">输入文字</el-button>
        <el-button @click="handleAddPic()">输入图片</el-button>
      </div>

    </div>
    <!--------------------------右侧顶部手机尾部---------------------------->
    <div style=""><img src="@/pics/phone_bottom.jpg" width="450"/></div>
  </div>

  <!--------------------------对话框：右侧文字编辑对话框---------------------------->
  <el-dialog title="文字" :visible.sync="open" width="500px"  append-to-body>
    <el-input
      type="textarea"
      rows="6"
      placeholder=""
      v-model="addText">
    </el-input>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitText">确 定</el-button>
      <el-button type="danger" @click="deleteText" v-if="status=='edit'">删 除</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
  <!--------------------------对话框：右侧图片编辑对话框---------------------------->
  <el-dialog title="图片" :visible.sync="openPic" width="80%"  append-to-body>
    <!---当前图片-->
    <div v-if="status=='edit'">
      <el-image
        style="width: 200px; height: 160px;border-radius: 20%;"
        :src="currentImage" @click="cancelPic"></el-image>
      <el-button type="danger" @click="deleteImage" v-if="status=='edit'">删 除</el-button>
    </div>
    <!---图片分类选择按钮-->
    <div>
      <el-radio-group v-model="picRadio" size="small" style="margin-left: 20px;" @change="queryList()">
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="收藏"></el-radio-button>
      </el-radio-group>
    </div>
    <!---图片列表-->
    <div>
      <ul class="ul_material table clearfix" >
        <li v-for="(m,index) in materialList" :key="index">
          <el-image
            style="width: 200px; height: 160px;border-radius: 20%;"
            :src="m.url" @click="pushImage(m.url)"></el-image>
        </li>

      </ul>

    </div>
    <!---分页for图片列表-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer">

      <el-button @click="cancelPic">取 消</el-button>
    </div>
  </el-dialog>




  <!--------------------------对话框：左侧单图三图公用编辑框---------------------------->
  <el-dialog title="图片" :visible.sync="openLeftPic" width="80%"  append-to-body>
    <!---当前图片-->
    <div v-if="checkLeftPic()">
      <el-image
        style="width: 200px; height: 160px;border-radius: 20%;"
        :src="currentLeftImage"></el-image>
    </div>
    <!---图片分类选择按钮-->
    <div>
      <el-radio-group v-model="picRadio" size="small" style="margin-left: 20px;" @change="queryList()">
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="收藏"></el-radio-button>
      </el-radio-group>
    </div>
    <!---图片列表-->
    <div>
      <ul class="ul_material table clearfix" >
        <li v-for="(m,index) in materialList" :key="index">
          <el-image
            style="width: 200px; height: 160px;border-radius: 20%;"
            :src="m.url" @click="pushLeftImage(m.url)"></el-image>
        </li>

      </ul>

    </div>
    <!---分页for图片列表-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer">

      <el-button @click="cancelLeftlPic">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {channelList4News} from "@/api/wemedia/channel";
import {listMaterial} from "@/api/wemedia/material";
import {
  listNews,
  getNews,
  delNews,
  addNews,
  updateNews,
} from "@/api/wemedia/news";
export default {
  name: "CreateNews",
  data() {
    return {
      // 是否显示左侧单图三图弹出城
      openLeftPic: false,
      // 正在操作哪左侧一个图片:1，单图，三图：3_1,3_2,3_3
      leftPicMode : undefined,

      //当前左侧图片
      currentLeftImage: undefined,
      //当前图片
      currentImage: undefined,
      picRadio: '全部',
      // 自媒体图文素材信息表格数据
      materialList: [],
      // 总条数
      total: 0,
      // 是否显示文字弹出层
      open: false,
      // 是否显示图片弹出层
      openPic : false,


      //添加图片
      addPicUrl : undefined,
      //编辑图片
      editPicUrl : undefined,
      //文字
      addText: "",
      //编辑文字
      editText: "",
      //json
      //添加还是修改
      status:"",
      //contentIndex
      contentIndex: undefined,

      contentJsonArray: [],
      newsChannel:"",
      cList: [],

      //单图
      one_pic: require("@/pics/select_pic.jpg"),
      //三图
      three_pic1: require("@/pics/select_pic.jpg"),
      three_pic2: require("@/pics/select_pic.jpg"),
      three_pic3: require("@/pics/select_pic.jpg"),

      //四张图片的状态，是更新还是新增
      //one_pic_status :"",
      //three_pic1_status :"",
      //three_pic2_status :"",
      //three_pic3_status :"",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isCollection: undefined,
      },
      //实体类
      newsParams:{
        id:undefined,
        title:undefined,
        labels:undefined,
        channelId:1,
        publishTime:undefined,
        images:undefined,
        type: 1,
        content:undefined,
        status: undefined
      }
    }
  },
  created() {
    //id不为空，更新操作
    if(this.$route.params.id){
      this.setNewsParams(this.$route.params.id);
    }
    this.getChannelList();
  },
  methods: {
    /**根据编辑按钮传过来的id，对界面进行赋值**/
    setNewsParams(id){
      getNews(id).then((response) => {
        this.newsParams = response.data;

        this.newsChannel = this.newsParams.channelId;
        this.contentJsonArray = JSON.parse(this.newsParams.content);
        if(this.newsParams.type == 1){
          this.one_pic = this.newsParams.images;
        }
        if(this.newsParams.type == 3){
          let imgs = this.newsParams.images.split(',');
          this.three_pic1 = imgs[0];
          this.three_pic2 = imgs[1];
          this.three_pic3 = imgs[2];
        }
        //console.log(response.data);
      });
    },
    /**保存草稿**/
    submitNews(){

      this.addNewsMethod('0');
    },
    /*提交审核*/
    submitAndVerify(){
      this.addNewsMethod('1');
    },
    addNewsMethod(newsStatus){
      this.newsParams.images = undefined;
      if(this.newsChannel == ""){
        this.$message({ showClose: true,message: '频道--不能为空！',type: 'error' });
        return;
      }
      this.newsParams.channelId = this.newsChannel;
      //1.contentJsonArray转换成json存入content
      //先验证
      if(this.contentJsonArray.length < 1){
        this.$message({ showClose: true,message: '图文内容--不能为空！',type: 'error' });
        return;
      }
      this.newsParams.content = JSON.stringify(this.contentJsonArray);

      //根据封面类型保存images
      if(this.newsParams.type == 1){
        //先验证
        if(!this.checkOnePic()){
          this.$message({ showClose: true,message: '封面--单图--不能为空！',type: 'error' });
          return;
        }
        this.newsParams.images = this.one_pic;
      }else if(this.newsParams.type == 3){
        //先验证
        if(!this.checkThreePic()){
          this.$message({ showClose: true,message: '封面--三图--三张图都不能为空！',type: 'error' });
          return;
        }
        this.newsParams.images = this.three_pic1 + "," +this.three_pic2 + "," +this.three_pic3;
      }else if(this.newsParams.type == 4){
        this.contentJsonArray.forEach((item,index) => {
          if(item.type == "image"){
            this.newsParams.images = item.value;
            return;
          }
        });
      }
      console.log(this.newsParams.type);
      this.newsParams.status = newsStatus;
      //提交
      addNews(this.newsParams)
        .then((response) => {
          this.$modal.msgSuccess("操作成功");
        });
      this.$router.push('/wemedia/news');
    },
    /**检测三张图片是否为空图，也就是本地图片,只有为不为空才会显示当前图片**/
    checkLeftPic(){
      if(this.leftPicMode == '1' && (this.one_pic.indexOf("http://") != -1||this.one_pic.indexOf("https://") != -1)){
        this.currentLeftImage = this.one_pic;
        return true;
      }
      else if(this.leftPicMode == '3_1' && (this.three_pic1.indexOf("http://") != -1||this.three_pic1.indexOf("https://") != -1)){
        this.currentLeftImage = this.three_pic1;
        return true;
      }
      else if(this.leftPicMode == '3_2' && (this.three_pic2.indexOf("http://") != -1||this.three_pic2.indexOf("https://") != -1)){
        this.currentLeftImage = this.three_pic2;
        return true;
      }
      else if(this.leftPicMode == '3_3' && (this.three_pic3.indexOf("http://") != -1||this.three_pic3.indexOf("https://") != -1)){
        this.currentLeftImage = this.three_pic3;
        return true;
      }
      return false;
    },
    checkOnePic(){
      if(this.one_pic.indexOf("http://") != -1||this.one_pic.indexOf("https://") != -1){
        return true;
      }
      return false;
    },
    checkThreePic(){
    if((this.three_pic1.indexOf("http://") != -1||this.three_pic1.indexOf("https://") != -1)
        && (this.three_pic2.indexOf("http://") != -1||this.three_pic2.indexOf("https://") != -1)
        && (this.three_pic3.indexOf("http://") != -1||this.three_pic3.indexOf("https://") != -1)){
      return true;
    }

      return false;
    },
    /**单图三图点击后处理方法**/
    setLeftPicHandle(leftMode){
      this.leftPicMode = leftMode;
      this.openLeftPic = true;
      this.getList();

    },
    pushLeftImage(url){
      //单图处理
      if(this.leftPicMode == '1'){
        this.one_pic = url;
      //三图处理
      }else if(this.leftPicMode == '3_1'){
        this.three_pic1 = url;
      }else if(this.leftPicMode == '3_2'){
        this.three_pic2 = url;
      }else if(this.leftPicMode == '3_3'){
        this.three_pic3 = url;
      }
      this.openLeftPic = false;
    },
    /** 选中图片加入指定的位置*/
    pushImage(url){
      if(this.status == "add"){
        this.contentJsonArray.push({"type":"image","value":url});
      }else{
        this.contentJsonArray[this.contentIndex] = {"type":"image","value":url};
      }

      this.openPic = false;
    },
    /** 查询自媒体图文素材信息列表 */
    getList() {
      listMaterial(this.queryParams).then(response => {
        this.materialList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    queryList(){
      this.queryParams.isCollection = this.picRadio == "全部" ? undefined : 1;
      this.getList();
    },
    getChannelList(){
      channelList4News().then((response) => {
        this.cList = response.data;
      });
    },
    getListByChannel(){
      this.newsParams.channelId = this.newsChannel;
    },
    /** 新增图片操作*/
    handleAddPic(){
      this.status = "add";
      this.openPic = true;
      this.getList();
    },
    /**
    submitPic(){
      this.contentJsonArray.push({"type":"image","value":"http://192.168.0.80:9000/ruoyi/2022/10/19/6ac67da5e8f24c1bb3d8ded2a98f369e.jpg"});
      this.openPic = false;
    },
*/
    /** 新增按钮操作 */
    handleAdd() {
      this.addText = "";
      this.status = "add";
      this.open = true;
    },
    /** 打开编辑框--用于右侧图文手机编辑区*/
    handleEdit(index){
      this.status = "edit";
      let contentType = this.contentJsonArray.at(index).type;
      if(contentType == "text"){
        this.addText = this.contentJsonArray.at(index).value;
        this.open = true;
      }else{
        this.openPic = true;
        this.currentImage = this.contentJsonArray.at(index).value;
        this.getList();
      }

      this.contentIndex = index;
    },
    deleteText(){
      this.contentJsonArray.splice(this.contentIndex,1);
      this.open = false;
    },
    deleteImage(){
      this.contentJsonArray.splice(this.contentIndex,1);
      this.openPic = false;
    },

    submitText() {

      //新增
      if(this.status == "add"){
        if(this.addText.length < 1){
          this.$message.error('文字不能为空！');
        }else{
          this.contentJsonArray.push({"type":"text","value":this.addText});
          this.open = false;
        }
        //修改
      }else{
        if(this.addText.length < 1){
          this.$message.error('文字不能为空！');
        }else{
          this.contentJsonArray[this.contentIndex] = {"type":"text","value":this.addText};
          this.open = false;
        }

      }



    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    //取消图片对话框按钮
    cancelPic(){
      this.openPic = false;
    },
    //取消图片对话框按钮
    cancelLeftlPic(){
      this.openLeftPic = false;
    },
  },

}
</script>

<style>
.news_content_class:hover{border:1px dotted #666666}

.ul_material {
  padding: 0;
  margin: 0;
  list-style: none;
}
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}
.table {
  width: 110%;
}
.table li {
  float: left;
  width: 201px;
  height: 161px;
  cursor: pointer;
  /*margin-top: -1px;
  margin-left: -1px;
  border: 1px solid #000;*/
  margin: 20px;
  box-sizing: border-box;
}

.three_pic{
  width: 160px; height: 160px; margin-right: 5px; cursor: pointer; z-index: 999;
}
</style>
